<template>
	<view class="accurate-search" :style="{minHeight: Wheight + 'px'}" :class="">
		<view class="top-condition">
			<view class="profession" @click="seleteKeyword">
				{{ profession }}
			</view>
			<view class="region" @click="seleteRegion">
				{{ region }}
			</view>
			<view class="refresh">
				<button type="primary" v-show="true">搜索</button>
				<button type="primary" v-show="false">刷新</button>
			</view>
		</view>
		<view class="total-information">
			<view class="hint" v-show="false">
				提示：请点击搜索按钮搜索
			</view>
			<view class="been-searching" v-show="true">
				<view class="total">
					共检索到{{ branches }}条信息
				</view>
				<view class="operation">
					<button type="primary">群发短信</button>
					<button type="primary">一键添加</button>
				</view>
			</view>
		</view>
		<view class="data-list">
			<view class="list-box">
				<view class="item" v-for="(item, index) in lists">
					<view class="shop-name self flex">
						<image src="/static/images/index/accurate-search/star.png" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="phone self flex">
						<image src="/static/images/index/accurate-search/list-phone.png" mode=""></image>
						<text title="sss">{{item.phone}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="mask" v-if="more">
			<view class="mask-layer-black" :style="{height: Wheight + 'px'}" @click="colse"></view>
			<view class="mask-li" @click="canshu">
				<image src="../../../static/images/icon-shezhi.png" mode=""></image>
				<text>参数设置</text>
			</view>
			<view class="mask-li">
				<image src="../../../static/images/icon-qingkong.png" mode=""></image>
				<text>清空通讯录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		//精准搜索
		name: "accurateSearch",
		data() {
			return {
				profession: 'SPA按摩足疗', //行业
				region: '北京市', //地区
				lists: [{
					id: 0,
					name: "新店新店新店新店新店新店新店新店新店新店新店新店新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, {
					id: 0,
					name: "新店",
					phone: "15063335523"
				}, ],
				Wheight: '',
				branches: 10,
				ShowHidden: false,
				more: false
			}
		},
		onLoad() {
			this.Wheight = this.$store.state.ContentHeight - 44;
		},
		//点击事件
		methods: {
			//选择行业关键词
			seleteKeyword() {
				uni.navigateTo({
					url: 'selectKeywords'
				})
			},
			// 选择地区
			seleteRegion() {
				uni.navigateTo({
					url: './addressBook'
				})
			},
			canshu() {
				uni.navigateTo({
					url: '../parameter'
				})
			},
			onNavigationBarButtonTap() {
				this.more = true;
			},
			colse() {
				this.more = false;
			}
		}
	}
</script>
<style lang="less" scoped>
	.flex {
		display: flex;
	}

	@paddcommon: 30rpx;
	@buttonback: #5696F8;

	.accurate-search {
		background: #F6F5F5;

		.top-condition {
			.flex;
			align-items: center;
			background: #fff;
			padding: 36rpx @paddcommon;

			.profession {
				width: 250rpx;
			}

			.region {
				width: 200rpx;
			}

			.refresh {
				margin-left: auto;

				button {
					height: 70rpx;
					line-height: 70rpx;
					background: @buttonback;
					font-size: 24rpx;
				}
			}
		}

		.total-information {
			height: 120rpx;
			line-height: 120rpx;
			margin-top: 30rpx;
			padding: 0 @paddcommon;
			background: #dddddd;

			.been-searching {
				.flex;
				justify-content: space-between;

				.operation {
					.flex;
					align-items: center;

					button {
						height: 70rpx;
						line-height: 70rpx;
						background: @buttonback;
						font-size: 24rpx;

						&:last-child {
							margin-left: 15rpx;
						}
					}
				}
			}
		}

		.data-list {
			background: #fff;

			.list-box {
				padding: 0 @paddcommon;

				.item {
					.flex;
					justify-content: space-between;
					align-items: center;
					padding: 23rpx 0;
					border-bottom: 1px solid #eeeeee;

					.self {
						.flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
							flex-shrink: 0;
						}

						text {
							max-width: 420rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							flex-wrap: nowrap;
							white-space: nowrap;
							letter-spacing: 1rpx;
						}
					}

					.shop-name {

						text {
							color: #000000;
							font-size: 32rpx;
						}
					}

					.phone {
						text {
							color: #666666;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.mask {
			width: 262rpx;
			height: 196rpx;
			position: absolute;
			top: 0rpx;
			right: 10rpx;

			.mask-layer-black {
				width: 100%;
				background: rgba(0, 0, 0, .3);
				position: fixed;
				top: 44px;
				left: 0;
				z-index: 1;
			}

			.mask-li {
				background-color: #FFFFFF;
				height: 98rpx;
				position: relative;
				z-index: 2;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 15rpx 15rpx;
					top: 25%;
				}

				text {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>
